<template>
   <el-dialog v-model="dialogVisible" title="完工确认单" width="980px" @open="open" class="watchElDialog" :append-to-body="true" >
      <div class="page-container" v-loading="isLoading">
        <el-dialog v-model="dialogVisibleSure" title="完工确认单" width="800px" append-to-body>
          <div>
            <el-form-item label="完工内容:" label-width="100">
              <el-input type="textarea" readonly :autosize="{ minRows: 1, maxRows: 3}" v-model="editRecord.taskDesc"> </el-input>
            </el-form-item>
            <el-form-item label="附件:" label-width="100">
              <ImagePreview
                :width="160"
                :height="160"
                :src="editRecord.taskPic"
                :preview-src-list="getArray(editRecord.taskPic)"
              />
            </el-form-item>
            <el-form-item label="验收备注:" label-width="100">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="editRecord.taskRemark"> </el-input>
            </el-form-item>
            <el-form-item label="任务确认书:" label-width="100">
              <el-link  @click="openConfirmFile(editRecord)" v-if="editRecord.taskConfirmFile" type="primary">已签署任务确认单</el-link>
              <span v-else>未签署</span>
            </el-form-item>
          </div>
          <template #footer>
            <el-space>
              <el-button @click="dialogVisibleSure = false">关闭</el-button>
              <el-button :loading="loading" @click="approval(2)">拒绝验收</el-button>
              <el-button :loading="loading" @click="approval(3)" type="primary">确认验收</el-button>
            </el-space>
          </template>
        </el-dialog>

          <el-table :data="rows" style="width: 100%;padding:0" border="1" :load="loading">
            <el-table-column prop="taskNo" label="子项目编号" width="130"> </el-table-column>
            <el-table-column prop="name" label="接单人" width="100"> </el-table-column>
            <el-table-column prop="phone" label="手机号" width="120"> </el-table-column>
            <el-table-column prop="cardId" label="身份证号" width="180"> </el-table-column>
            <el-table-column prop="cost" label="服务金额（元）" width="120">
              <template #default="scope">
                {{proxy?.convertFenToYuan(scope.row.cost)}}
              </template>
            </el-table-column>
            <el-table-column prop="taskStatus" label="完工状态" width="120">
              <template #default="scope">
                  <dict-tag :options="woker_task_status" :value="scope.row.taskStatus" />
              </template>
              </el-table-column>
            <el-table-column prop="address" label="附件"  width="110">
              <template #default="scope">
                  <el-tag  type="primary" style="cursor: pointer;margin-left:2px;"  @click="selFj(scope.row)">查看附件</el-tag>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template #default="scope">
                <el-tag  type="success" style="cursor: pointer;margin-left:2px;"  @click="viewSheet(scope.row)">完工报告</el-tag>
              </template>
            </el-table-column>
          </el-table>
      </div>
   </el-dialog>
</template>

<script lang="ts" setup>
import {acceptance} from "@/api/project/index"
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const dialogVisible = ref<boolean>(false)
const dialogVisibleSure = ref(false);
const loading = ref<boolean>(false)
const  props = defineProps(['item']);
const item = ref({});
item.value = props.item;
const isLoading = ref(false);
const rows = ref([])
const { woker_task_status } = toRefs<any>(proxy?.useDict('woker_task_status'));


/**
 * 查询完工确认单
*/
const route = useRoute();
// const { response, isLoading } = useRequest('/payment/taskEnroll/successlist', 'GET', {
//   params: {
//       taskId: item.id;
//   }
// }, { immediate: true })


const editRecord = ref({
  taskDesc: '',
  taskRemark: '',
  taskPic: ''
})


const query = async ()=>{
  const { response, isLoading } = await useRequest('/payment/taskEnroll/successlist', 'GET', {
    params: {
        taskId: item.value.id
    }
  }, { immediate: true });
  rows.value = response?.value.rows;
}

const open = async()=>{
  query();
}


const getArray =(pic:any)=>{

  if(!pic){
    return [];
  }
  return pic.split(",")
}


const openConfirmFile = (editRecord:any)=>{
  window.open(editRecord.taskConfirmFile);
}


const selFj =(row:any)=>{
    if(!row.taskPic){
      proxy?.$modal.msgError(`未上传交付文件!`);
      return ;
    }
    let extension = proxy?.getExtension(row.taskPic);
    proxy?.download("/resource/oss/dlurl", {
     url:row.taskPic,
    }, `交付附件.${extension?extension:''}`);
}
/**
 * 验收操作
*/
const approval = async (opinion) => {
  loading.value = true;
  acceptance({
          id: editRecord.value.id,
          taskId: editRecord.value.taskId,
          taskStatus: opinion,
          taskRemark: editRecord.value.taskRemark
 }).then((res)=>{
   if (res.code === 200) {
        dialogVisibleSure.value = false;
        ElMessage.success(data?.value?.msg || '操作成功')
        query();
    }
 }).finally(()=>{
   loading.value = false
 })

// const { data } = await useRequest('/payment/taskEnroll/acceptance', 'put', {
//       data: {
//           id: editRecord.value.id,
//           taskId: editRecord.value.taskId,
//           taskStatus: opinion,
//           taskRemark: editRecord.value.taskRemark
//       }
//   }, {
//        immediate: true,
//        // onSuccess: (res) => {
//        //   alert(res);
//        //   alert(res.code)
//        //    return;
//        //    if (data?.value?.code === 200) {
//        //         dialogVisibleSure.value = false;
//        //         ElMessage.success(data?.value?.msg || '操作成功')
//        //         query();
//        //     }
//        // },
//         onFinish: () => {
//               loading.value = false
//        }

//    })


//    console.log(data);

//    if (data?.value?.code === 200) {
//         dialogVisibleSure.value = false;
//         ElMessage.success(data?.value?.msg || '操作成功')
//         query();
//     }
}



const viewSheet = async data => {
  dialogVisibleSure.value = true
  const { data: result } = await useRequest('/payment/taskEnroll/queryConfirmation', 'get', {
      params: {
          id: data.id
      }
  }, { immediate: true })
  editRecord.value = result.value
}

watch(() => props.item, async val => {
    item.value = val;
})

</script>

<style scoped lang="scss">

  :deep(.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body){
    padding: 5px !important;
  }

  ::v-deep .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body{
    padding: 5px !important;
  }


  .watchElDialog .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body  {
      padding: 5px !important;
  }
.page-container {
  padding: 1px 5px 1px 5px;
  height: calc(100vh - 300px);
  overflow-y: auto;

  .footer {
    background: #fff;
    text-align: center;
    z-index: 999;
    margin-top: 20px;
  }
}
</style>
